Noratetsu Lab

　Noratetsu Houseの作り方の続きです。
　今回はDynalist APIで取得したデータの加工について。

　Noratetsu Houseの作り方の続きです。
　今回はDynalist APIの利用について。

　Noratetsu Houseの作り方の続きです。
　今回はAPIの利用について。

　Noratetsu Houseの作り方（概要）の続きです。
　今回はホスティングサービスを実際に使ってみるところまで。

（問い合わせフォームにいただいたコメントは拝読しております。ありがとうございます！）

　手順としては三つの工程があります。

1. HTMLを用意する
2. GitHubのリポジトリを用意する
3. ホスティングサービスにGitHubを紐づける

　手順さえ分かればあとはそれぞれキーワードで検索すればよろしいかと思いますが、多少ショートカットできるようにわかりやすそうなページを貼っていくことにします。親切な先人が労力を割いて解説してくれているわけなので、新たに書くよりそちらにアクセスしてもらった方がみんなハッピーでしょう。

HTMLを用意する

　HTMLとは、というところからスタートすると果てしなく話が広がってしまうので、詳しい書き方をここで解説することはしません。参考になるサイトのリンクを貼っておきます。

• Webページ作成入門 - とほほのWWW入門
• HTML の基本 - ウェブ開発を学ぶ | MDN
• HTMLリファレンス［HTML Living Standard］ - TAG index

　私もHTMLに詳しいわけではないので、これらのサイトの内容を読むとあちこちで「へえー」と思ったりします。必要な分だけその都度知っていけば良いでしょう。
　さて、今回必要なのはホスティングサービスが利用できることを確認するためのファイルなので、超簡単なHTMLをサンプルとして置いておきます。表示したいファイルが既にあるならそちらをお使いください。

  
  
  
  
      
      
      
      
      
  
  
  
    
Hello World!
  
  
  
  
  

GitHubのリポジトリを用意する

　私が使っているホスティングサービスは、GitHubに作ったリポジトリ内のファイルを用いてサイトを構築します。なので、GitHubのアカウントを取得し、リポジトリを用意する必要があります。
　まずアカウント取得について。

• 公式：GitHub でのアカウントの作成 - GitHub Docs
• 1分もかからない！5ステップでGitHubアカウント作成 | アールエフェクト

　リポジトリの作成について。公式ドキュメントが十分親切なのでこれだけ貼っておきます。

• 公式：リポジトリを作成する - GitHub Docs

　リポジトリ名は適当なもので大丈夫です。また、今回使うホスティングサービスではリポジトリがPrivateでも問題ないので、とりあえず公開設定はPrivateにしておくとよいでしょう。

（左端の真ん中あたりに余計なボタンが写っていますが気にしないでください。）
　なお、ここではGitについては省略します。Gitが分かる方はGitHubとの連携方法はすんなりわかるでしょうし、ホスティングサービスの利用にGitは直接は関係ないので（今必要なのはGitHubのリポジトリにファイルがあることだけなので）、ひとまず置いておくことにします。今回はGitHub上で直接ファイルを追加します。

　リポジトリを用意できたら、「index.html」を作成します。
　今作ったリポジトリはこうなっています。

　緑の「Code」ボタン左の「Add File」から「Create new file」を選択します。既にローカルにファイルがあるなら「Upload files」でもいいです。

　「Create new file」を選んだ場合はエディタが表示されるので、ファイル名を「index.html」とし、用意したHTMLをペーストしましょう。

　右上の緑の「Commit changes...」をクリックします。するとコミット（バージョン管理のための履歴を新たに作ること）の画面になります。以後もファイルを更新する度にコミットメッセージを記述することになります。後々更新作業をした時はその内容をここにわかりやすく書いておくのが望ましいです。descriptionは必要なければ省略できます。記述したら右下の「Commit changes」をクリック。

　GitHubについてはこれで最低限の用意ができました。
　ちなみに、GitHubは「GitHub Pages」という静的サイトホスティングサービスを提供しています。

• GitHub Pages について - GitHub Docs

　あんまりあっちこっちにアカウントを作りたくないという人はこちらを試してみてもよいでしょう。ずっと使う本拠地としては頼りないですが、気軽にページを作れるので「ちょっと公開してみたい」という場合には十分かもしれません。

ホスティングサービスにGitHubを紐づける

　静的サイトのホスティングサービスとしてメジャーなのは、「Cloudflare Pages」「Netlify」「Vercel」の三つかなと思います。私はNetlifyは試したことがあり、Noratetsu HouseではCloudflare Pagesを使っています。Vercelは使ったことがありません。

• Cloudflare Pages
• Scale & Ship Faster with a Composable Web Architecture | Netlify
• Vercel: Build and deploy the best Web experiences with The Frontend Cloud

　Cloudflare Pagesの長所短所はこちらの記事が詳しく解説してくれています。

• Cloudflare Pagesのメリットとデメリットを解説【上手に使うとコスパ最強】 - こふぶろぐ

　ホスティングサービスの比較記事や違いが見える記事はこちら。

• Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
• 実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun) | blog.ojisan.io
• Netlifyの無料枠を越えてしまい、1日20ドル請求されてしまった話 | 日々、とんは語る。

　ただし情報は最新のものとは言えません。正確な情報は適宜お調べになってください。

　ここではCloudflare Pagesの導入について紹介します。

• 【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ

　こちらの記事はわかりやすく参考になりますが、今回はHugoは使わないので、その部分だけ飛ばして読んでください。
　先程作ったリポジトリで実際にサイトを作ってみましょう。GitHubのリポジトリを選択すると、このような画面に遷移すると思います。

　プロジェクト名はサイトのURLになるので気をつけて設定してください。後から変更はできないと思います。（自分が契約しているドメインと紐付けることならカスタムドメイン設定にてできます。）
　上記の記事内では「フレームワーク プリセット」にHugoを指定していましたが、今回は何も使わないので「なし」のままでいいです。そのまま右下の「保存してデプロイする」をクリックしてください。ファイルの中身に問題がなければ数秒でデプロイ（＝ユーザーが実際に使えるようにすること）は完了します。

　今回できたサイトはこちらです。

• Sample

　以後はGitHubのファイルを更新する度に自動でサイトの内容も更新されます。ファイルが有効でないなど何らかの理由でデプロイが上手くいかなかった場合は、公開データは前バージョンのまま維持されます。
　色々と機能などはありますが、最低限のところはこんな感じになります。お疲れ様でした。

　サイトについてコメントをいただいたので、回答を兼ねてサイトについてもう少し詳しく書こうと思います。

• Noratetsu House
• 個人サイトを作りました

　問い合わせの内容についてそのまま掲載する可能性があるというような断りを事前にしていないので、差し障りがないよう要点だけ書いておくことにします。

• アウトライナーをブログ化できたらいいなと思っていた
• 同じ仕組みでサイトを作ってみたい
• プログラミング、特にサーバー周りの知識が乏しいため何をやればいいかわからない

　ご感想ありがとうございます！　コメントをもらえるとはあまり思っていなかったのでとても嬉しいです。

サーバーの知識はあまり要らない

　さて、まずサイトの仕組みとして根幹の方からお答えします。
　サーバー周りの知識がないのでどうしたらというお話ですが、サーバーについては私もよくわかっていません！　というのは、このサイトに関しては自前のサーバーでもレンタルサーバーでもなく、Cloudflare Pagesというホスティングサービス（という言い方でいいのかどうか）を利用しているからです。同種のサービスには他にNetlifyやVercelがあります。
　Cloudflare Pagesは何をしてくれるのかと言うと、サイトを作るのに必要なファイル（html、css、js、favicon.ico等）をGitHubにプッシュしておけば、それを使って自動でサイトを生成して公開してくれるのです。レンタルサーバーを兼ねてくれているということになろうかと思いますが、ユーザーがサーバー周りの知識を持っていなくてもうまいことやってくれるので便利です。（知識があればより細かい設定ができます。）
　つまりサイトの公開に最低限必要なのは、①html等のファイル、②GitHubのリポジトリ、③Cloudflare Pagesなどのホスティングサービスのアカウント、ということになります。
　なおGitHubは本来Gitを通してファイルをアップロードするものですが、Gitを使わずにサイト上で手動でファイルを更新することもできるので、Gitの知識がなくてもサイトの公開は可能です。
　各サービスのアカウント取得方法や設定方法は、検索すれば私よりずっと詳しい人の親切な解説が色々あるのでそちらをご参照ください。

同じ仕組みでやるには

　同じ仕組みでサイトを作ってみたいというお話でしたが、Dynalistを使うのは結構大変かもしれないというのは予め申し上げておきます。もし全く同じようにやるとしたら以下の知識が必要となります。

• HTMLとCSSの知識
• JavaScriptのDOM（≒HTML要素の操作）と配列周りの知識
• 正規表現の知識
• サーバーサイド言語のどれか（Node.js、Pythonなど）の知識
• APIの使い方の理解
• Gitの知識

　ひとつひとつはそんなに難しくはないですが、ゼロから慣れるまでにはちょっとかかるかもしれません。多分絶対的にそれなりの時間がかかります。

玄人の方へ

　JavaScriptとか余裕だぜヘイヘイヘーイという方向けの説明を簡単にしておきます。データの取得と変換の流れは以下の通りです。（非プログラマーなので表現が変だったらすみません。）

1. Dynalistの特定のドキュメントに決まった書式で記事データを用意する
   • 本文部分はMarkdown形式で書いておく
   • findやfilterで抽出しやすい書式を自分で考える
2. サーバーサイドでDynalist API^[1]を叩いてドキュメントのデータを取得し、頑張って記事単位のデータを作ってjsonで保存
   • この段階で本文はmarkedライブラリ^[2]を利用してhtmlにしておく
3. クライアントサイドのjsではfetchでjsonの中身を取得してDOM構築

　複雑なことは特にないと思いますが、Dynalist APIで取ってくるデータは全てのノードのデータがフラットに並んだ配列なので、記事の親ノードがどれで本文はどこからどこまでかを解釈するために工夫が必要です。私はnoteに「date:」という文字列が含まれるかどうかで親ノードを判定していますが、headingやcolorを利用するのも簡便で良いと思います。
　本文を取得するのもちょっと面倒くさいですが、childrenプロパティに子ノードのidが上から順番に入っているのでそれを再帰的に処理して取得します。データには開閉状態の情報も含まれているので、畳んでいるものは子ノードを取得しないといった判定をするようにすると、没になった文は畳んでおけばよくなるので楽です。
　本文はMarkdownで書いておいてmarkedでhtmlに変換しますが、それだけでは十分でない部分はreplace+正規表現で変換します。例えば自分のブログ記事のリンクをサイト内リンクに変換するなどです。markedで処理する前にやっておきます。
　htmlへの変換はクライアントサイドでもいいですが、予め変換しておいたjsonを読み込んだ方が処理速度が速くなるんじゃないかなと思って事前にやっています。
　なお私はひとつのjsonにまとめて出力していますが、記事単位でmdファイルにした方が使い勝手が良いという人も多いかもしれません。

ビギナーの方へ

　「これをこうするだけで実は誰でも簡単にできるんですよ」と言ってさらっと書いてしまいたいところなのですが、どうしても簡単にはならない要素が色々あります。（私は一年九ヶ月くらいJavaScriptと格闘し続けてやっとこういうことができるレベルに到達しました。）
　なので、記事一本で説明するのはちょっと無理なのですが、書き残さないと私としても勉強が財産にならないので、ステップを分解してひとつひとつ書いてみようかと思います。各ステップとしては、

• まずサイトとして最低限成り立つHTML（およびCSS、JavaScript）を書いてみる
• それをGitHubにアップロードし、ホスティングサービスでデプロイしてもらう（＝サイトとして成り立つように構築して公開する）
• APIというものを利用してみる
• Dynalist APIを理解する
• Dynalist APIで返ってくるデータを解釈して自分好みの形に変換する

こんなところでしょうか。
　説明のためには私自身勉強しながら書くことになるので時間がかかると思いますが、社会の端っこにあるようなこのブログにて偶然ご縁が生まれた皆様の生活が少しでも豊かになれば私も嬉しいので、私に書けることは書いていきたいと思います。（時間的・気分的に負担にならない範囲でやりますので更新はのんびりになるでしょう。）

---

1. Dynalist API ↩︎

2. Marked（ライブラリ） ↩︎